<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组建与实例的关系</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="inputValue" autofocus="true">
        <button @click="handleClick">提交</button>
    </div>

    <ul>
        <!-- 在Vue中父组件向子组件传值是通过属性方式来传值的 -->
        <todo-item v-for="(item ,index) of list" :key="index" :content="item">

        </todo-item>
    </ul>
</div>

<script>
    // <!-- 子组件 -->
    Vue.component('todo-item', {
        props : ['content'], //子组件接收父组件传过来的值
        template:'<li @click="handleClick">{{content}}</li>',
        methods : {
            handleClick : function(){
                alert("Ha Ha ......"+this.content)
            }
        }
    })

    // 父组件
    new Vue({
        el : "#root",
        data : {
            inputValue : "",
            list : []
        },
        methods : {
            handleClick : function(){
                this.list.push(this.inputValue)
                this.inputValue = '' // 每次提交后清空
            }
        }
    })
</script>
</body>
</html>